<template>
  <view class="photoButton">
    <view> <img class="img1" ref="img1" @click="Img1" /></view>
    <view> <img class="img2" ref="img2" @click="Img2" /></view>
  </view>
</template>

<script>
import Bus from '../utils/EventBus'
import store from '../store/index.js'

export default {
  data() {
    return {
      ClearSX:'ClearShengXiao',
	  ClearButton1:'ClearButton1',
	  ClearButton2:'ClearButton2',
	  ButtonSX:['toushu','shumu','niuqi','duiniu','ruhu','hudou','daitu','tuotu','longma','longzheng','jingshe','huashe','mata','wanma',],
      sliderData: [],
      shuData: [
        { url: '../../static/3x/shu/shu01.png' },
        { url: '../../static/3x/shu/shu02.png' }
      ],
      niuData: [
        { url: '../../static/3x/niu/niu01.png' },
        { url: '../../static/3x/niu/niu02.png' },
      ],
      huData: [
        { url: '../../static/3x/hu/hu01.png' },
        { url: '../../static/3x/hu/hu02.png' }
      ],
      tuData: [
        { url: '../../static/3x/tu/tu01.png' },
        { url: '../../static/3x/tu/tu02.png' }
      ],
      longData: [
        { url: '../../static/3x/long/long01.png' },
        { url: '../../static/3x/long/long02.png' }
      ],
      sheData: [
        { url: '../../static/3x/she/she01.png' },
        { url: '../../static/3x/she/she02.png' }
      ],
      maData: [
        { url: '../../static/3x/ma/ma01.png' },
        { url: '../../static/3x/ma/ma02.png' }
      ]
    }
  },
  computed:{
	  sxid(){
		  return store.state.SX
	  }
  },
  // props: {
  //   sxid: {
  //     type: Number
  //   }
  // },
  methods: {
      pdShengXiao() {
        console.log(this.sxid)
      switch (this.sxid) {
        case 1:
          this.sliderData = this.shuData;
          break;
        case 2:
          this.sliderData = this.niuData;
          break;
        case 3:
          this.sliderData = this.huData;
          break;
        case 4:
          this.sliderData = this.tuData;
          break;
        case 5:
          this.sliderData = this.longData;
          break;
        case 6:
          this.sliderData = this.sheData;
          break;
        case 7:
          this.sliderData = this.maData;
          break;
        case 8:
          this.sliderData = this.yangData;
          break;
        case 9:
          this.sliderData = this.houData;
          break;
        case 10:
          this.sliderData = this.jiData;
          break;
        case 11:
          this.sliderData = this.gouData;
          break;
        case 12:
          this.sliderData = this.zhuData;
          break;
        default:
          break;
        }
        this.shengxiaoImg()
        // console.log(this.sliderData[0].url)
      },
      shengxiaoImg(){
        this.$refs.img1.src = this.sliderData[0].url
        this.$refs.img2.src = this.sliderData[1].url
        // console.log( this.$refs.img1)
      },
      Img1(){
        Bus.$emit('SendClear',this.ClearSX)
		switch (this.sxid) {
		  case 1:
		    Bus.$emit('SendSXID',this.ButtonSX[0])
		    break;
		  case 2:
		    Bus.$emit('SendSXID',this.ButtonSX[2])
		    break;
		  case 3:
		    Bus.$emit('SendSXID',this.ButtonSX[4])
		    break;
		  case 4:
		    Bus.$emit('SendSXID',this.ButtonSX[6])
		    break;
		  case 5:
		    Bus.$emit('SendSXID',this.ButtonSX[8])
		    break;
		  case 6:
		    Bus.$emit('SendSXID',this.ButtonSX[10])
		    break;
		  case 7:
		    Bus.$emit('SendSXID',this.ButtonSX[12])
		    break;
		  case 8:
		    Bus.$emit('SendSXID',this.ButtonSX[14])
		    break;
		  case 9:
		    Bus.$emit('SendSXID',this.ButtonSX[16])
		    break;
		  case 10:
		    Bus.$emit('SendSXID',this.ButtonSX[18])
		    break;
		  case 11:
		    Bus.$emit('SendSXID',this.ButtonSX[20])
		    break;
		  case 12:
		    Bus.$emit('SendSXID',this.ButtonSX[22])
		    break;
		  default:
		    break;
        }
		// console.log(this.ButtonSX[2])
		// Bus.$emit('SendSXID',this.ButtonSX[12])
		Bus.$emit('ClearButton',this.ClearButton1)
        console.log('111')
        // console.log(this.sxid)
      },
      Img2(){
		Bus.$emit('SendClear',this.ClearSX)
		switch (this.sxid) {
		  case 1:
		    Bus.$emit('SendSXID',this.ButtonSX[1])
		    break;
		  case 2:
		    Bus.$emit('SendSXID',this.ButtonSX[3])
		    break;
		  case 3:
		    Bus.$emit('SendSXID',this.ButtonSX[5])
		    break;
		  case 4:
		    Bus.$emit('SendSXID',this.ButtonSX[7])
		    break;
		  case 5:
		    Bus.$emit('SendSXID',this.ButtonSX[9])
		    break;
		  case 6:
		    Bus.$emit('SendSXID',this.ButtonSX[11])
		    break;
		  case 7:
		    Bus.$emit('SendSXID',this.ButtonSX[13])
		    break;
		  case 8:
		    Bus.$emit('SendSXID',this.ButtonSX[15])
		    break;
		  case 9:
		    Bus.$emit('SendSXID',this.ButtonSX[17])
		    break;
		  case 10:
		    Bus.$emit('SendSXID',this.ButtonSX[19])
		    break;
		  case 11:
		    Bus.$emit('SendSXID',this.ButtonSX[21])
		    break;
		  case 12:
		    Bus.$emit('SendSXID',this.ButtonSX[23])
		    break;
		  default:
		    break;
			}
		Bus.$emit('ClearButton',this.ClearButton2)
        console.log('222')
      }
    },
  mounted(){
    this.pdShengXiao()
  }
}

</script>

<style scoped>
.photoButton {
  position: relative;
  background-color: pink;
}

.photoButton img {
  width: 40vw;
}

.photoButton .img1 {
  position: absolute;
  top: 400rpx;
  left: 20rpx;
}

.photoButton .img2 {
  position: absolute;
  top: 400rpx;
  right: 20rpx;
}
</style>
